<template>
  <view>
      <view class="goods-list">
          <view  v-for="(goods,i) in goodsList" :key='i' @click="gotoDetail(goods)">
            <!-- 调用商品每一项子组件 -->
            <my-goods :goods="goods" @></my-goods>
            <!-- //调用商品每一项子组件 -->
          </view >
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //请求商品列表所需要的数据
           queryObj: {
                // 查询关键词
                query: '',
                // 商品分类Id
                cid: '',
                // 页码值
                pagenum: 1,
                // 每页显示多少条数据
                pagesize: 10
              },
        //商品列表数据
        goodsList:[],
        //商品列表数据总数
        total:0,
        //节流阀  节流处理
        isloading:false
      };
    },
    onLoad(options) {
       // console.log(options)
       //将页面携带的参数存到queryObj中
       this.queryObj.query=options.query||''
       this.queryObj.cid=options.cid||''
       //调用请求商品列表数据的方法
       this.getGoodsList()
    },
    methods:{
      //请求商品列表的方法
      async getGoodsList(cd){
        //节流阀打开
        this.isloading=true
        //发起商品列表请求
        const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        //关闭节流阀
        this.isloading=false
        //判断有没有传递关闭下拉刷新的回调函数 如果有就调用
        cd&&cd()
        // console.log(res)
        //将得到的商品列表数据赋值给goodsList
        //展开运算符 商品列表新旧数据拼接
        this.goodsList=[...this.goodsList,...res.message.goods]
        //将得到的列表总数赋值给total
        this.total=res.message.total
      
      },
      //点击商品item项跳转到商品详情页面的方法
      gotoDetail(item) {
        // console.log(1)
        uni.navigateTo({
          url:"/subpkg/goods_detail/goods_detail?goods_id="+item.goods_id
        })
      }
    },
    //监听上拉触底事件
    onReachBottom() {
      if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total) {
        return uni.$showMsg('数据加载完毕')
      }
      if(this.isloading) {
        return 
      }
      //让页码值自增+1
      this.queryObj.pagenum+=1
      //调用获取商品列表方法
      this.getGoodsList()
    },
    //监听下拉刷新事件
    onPullDownRefresh() {
      //1.重置关键数据
      //页码值为1
      this.queryObj.pagenum=1,
      //数据总数为0
      this.total=0
      //关闭节流阀
      this.isloading=false
      //重置商品列表为[]
      this.goodsList=[]
      //调用获取商品列表方法  回调函数关闭下拉刷新
      this.getGoodsList(()=>{uni.stopPullDownRefresh()})
    }
  }
</script>

<style lang="scss">
.goods-list {
 
  
}
</style>
